<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>小米轮播图制作</title>
        <!-- 轮播图：JavaScriot技术完成 
             前端框架：简化开发模式JavaScriot技术完成轮播图
             使用最简单的方式 功能一致
             terseBannerJS 专门针对轮播
        -->
        <!-- 1.轮播图样式 -->
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <!-- 3.类似于html固定写法 【小心起名冲突】-->
        <!-- 3.1 main 样式为主：引入轮播 -->
        <div class="main">
            <!-- 3.2 id=animation js行为为主 轮播行为-->
            <div id="animation"></div>
            <!-- 3.3 class="container 样式为主：开辟轮播空间-->
            <div class="container">
                <!-- 3.4选择轮播效果 延迟加载-->
                <div class="banner" id="lazyload">
                <ul>
                    <li><img src="../img/banner01.jpg" alt="1" /></li>
                    <li><img src="../img/banner02.jpg" alt="2" /></li>
                    <li><img src="../img/banner03.jpg" alt="3" /></li>
                    <li><img src="../img/banner04.jpg" alt="4" /></li>
                    <li><img src="../img/banner05.jpg" alt="5" /></li>
                </ul>
                </div>
            </div>
        </div>
        <!-- 2.引入jquery封装轮播框架 js文件 -->
        <script src="js/highlight.pack.js"></script>
        <script src="js/jquery-1.11.1.js"></script>
        <script src="js/jquery.terseBanner.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>